<!--
 * @Date: 2021-04-23 14:28:35
 * @LastEditors: 哈皮
 * @LastEditTime: 2021-04-23 19:54:42
 * @FilePath: \day-six\demo1\src\views\comment.vue
-->
<template>
  <div class="comment">
    <el-container>
      <el-header style="height: 60px"> </el-header>
      <el-container>
        <el-main>
          <div class="top">
            <h3 v-text="comments.title"></h3>
            <p>
              <span v-text="comments.author"></span>&emsp;
              <span v-text="comments.createtime"></span>&emsp;
              <span v-text="comments.type"></span>
            </p>
            <div class="content" v-text="comments.content"></div>
          </div>
          <div class="ipt">
              <el-input v-model="text" placeholder="请输入内容"></el-input>
             <el-button type="primary" @click="send">评论</el-button> 
          </div>
          
          <div class="comments" v-if="commentList.length">
            <dl v-for="item in commentList" :key="item.id">
              <dt v-text="item.comment_author"></dt>
              <dd>
                <p v-text="item.text" class="text"></p>
                <p v-text="item.createtime" class="createtime"></p>
              </dd>
            </dl>
          </div>
          <div class="comments" v-else>
              <h4>暂无评论</h4>
          </div>
        </el-main>
        <el-aside width="200px">Aside</el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Mock from 'mockjs'
import { mapActions, mapState } from "vuex";
export default {
    data(){
        return {
            text:'',
            comment_author:Mock.Random.cname(),
            createtime:new Date().toLocaleString('chinese', { hour12: false }),
            authorId:''
        }
    },
  computed: {
    ...mapState(["commentList", "comments"]),
  },
  methods: {
    ...mapActions(["watchComment","addComment"]),
    send(){
        console.log(this.createtime)
        this.addComment({
            comment_author:this.comment_author,
            createtime:this.createtime,
            text:this.text,
            authorId:this.$route.query.authorId
        })
        this.text=''
    }
  },
  async created() {
    await this.watchComment(this.$route.query.authorId);
  },
};
</script>

<style lang='scss'>
.comment,
.el-container {
  width: 100%;
  height: 100%;
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  padding-bottom: 100px;
  .top{
      text-align: left;
      >p{
          font-size: 14px;
          line-height: 30px;
      }
      .content{
          width: 96%;
          min-height: 150px;
          background: #fff;
          padding: 10px;
      }
  }
  .ipt{
      width: 96%;
      margin-top: 10px;
      display: flex;
  }
  .comments{
      text-align: left;
      padding:0 40px;
      h4{
          text-align: center;
          line-height: 200px;
      }
      dl{
          width: 100%;
      }
      dt{
          line-height: 30px;
      }
      dd{
          padding-left: 5px;
          background: #fff;
          .text{
              font-size: 14px;
              line-height: 30px;
          }
          .createtime{
              font-size: 12px;
              color: #999;
              line-height: 30px;
          }
      }
  }
}

body > .el-container {
  margin-bottom: 40px;
}
</style>